<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>p6_相对定位</title>
        <style>
            .fu{
                background-color: #ff0;
            }
            .fu>div{
                width: 100px;
                height: 100px;
            }
            .z1{
                background-color: #f00;
            }
            .z2{
                background-color: #0f0;
                position: relative;/*使用相对定位*/
                /*移动参照物：自己原来的位置*/
                top: 50px;
                right: 50px;
                z-index: 2;/*调整层级，数字越大，层级越靠上*/
            }
            .z3{
                background-color: #00f;
                position: relative;
                z-index: 1;
            }
        </style>

    </head>
    <body>
        <div class="fu">
            <div class="z1">z1</div>
            <div class="z2">z2</div>
            <div class="z3">z3</div>
        </div>

    </body>
</html>